import { App, createVNode, render, ComponentPublicInstance } from "vue";
import contextMenu from "./src/ContextMenu.vue";
import { CustomMouseMenuOptions } from "./src/types";
import { createClassDom } from "./dom";

contextMenu.install = (app: App): void => {
  app.component(contextMenu.name, contextMenu);
};

const ContextMenu = (
  options: CustomMouseMenuOptions
): ComponentPublicInstance => {
  const className = "context_menu__container";
  let container: HTMLElement;
  if (document.querySelector(`.${className}`)) {
    container = document.querySelector(`.${className}`) as HTMLElement;
  } else {
    container = createClassDom("div", className);
  }
  const vm = createVNode(contextMenu, options, null);
  render(vm, container);
  document.body.append(container);
  const vCpn = vm.component?.proxy as ComponentPublicInstance<
    typeof contextMenu
  >;
  vCpn.show();
  return vCpn;
};

export { ContextMenu };
export default contextMenu;
